
<script setup>
import {ref} from 'vue'
/**
 * ref函数包裹的响应式数据
 *    在模板中使用，正常使用
 *    在script标签中，需要.value
 */

// 复杂数据类型
const person = ref({
  name:'张三',
  age:18
})
// console.log(person);

const changeName = () => person.value.name = '李四'
const changeAge = () => person.value.age++

// 简单数据类型
const car = ref('自行车')
const changeCar = () => car.value = '奔驰s600'
</script>

<template>
  <div>
    <div>{{ person }}</div>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
    <div>{{ car }}</div>
    <button @click="changeCar">换车</button>
  </div>
  
</template>

<style scoped></style>